<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>演员管理</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/index.css}" rel="stylesheet">
    <link th:href="@{/css/config.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/jquery.pagination.css}" rel="stylesheet">

</head>

<body>
<!-- nav导航 -->
<div th:replace="common/bar::#header"></div>
<!-- 页面主体 -->
<div class="dh mainbox">
    <!-- 左边菜单 -->
    <div th:replace="common/bar::#menu"></div>
        <!-- 右边主显示部分 -->
        <div class="main-rightbox">
            <div class="mainrightbox">
                <!-- 路径导航 -->
                <ol class="breadcrumb">
                    <li><a th:href="@{/index.html}">首页</a></li>
                    <li class="active">基础管理</li>
                    <li class="active">菜单管理</li>
                </ol>
                <!-- 显示表格 -->
                <div class="main_box">
                    <!-- 顶部搜索添加框 -->
                    <div class="row">
                        <!-- 搜索框 -->
                        <div class="col-lg-2 col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                                  <button class="btn btn-default" type="button">搜索</button>
                            </span>
                            </div>
                        </div>
                        <div class="col-li-2 col-md-4">
                            <button type="button" class="btn btn-primary adduser" onclick="addfun()">添加</button>
                        </div>
                    </div>
                    <!-- 表格显示区域 -->
                    <div class="maintab">
                        <table class="table table-striped table-bordered table-hover" id="sample_1">
                            <thead>
                                <tr>
                                    <th class="">id</th>
                                    <th class="">演员名</th>
                                    <th class="">演员照片</th>
                                    <th class="">创建日期</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="odd gradeX" th:each="list:${page.getRecords()}">
                                    <td th:text="${list.id}">1000</td>
                                    <td th:text="${list.name}">1000</td>
                                    <td><img th:src="${list.pictureUrl}" style="width: 100px;height: 100px"></td>
                                    <td th:text="${#dates.format(list.createDate,'yyyy-MM-dd HH:mm:ss')}">1000</td>
                                    <td>
                                        <span class="label label-success cp editmsg" th:onclick="editfun([[${list.id}+'']])">编辑</span>
                                        <span class="label label-success cp deletelist deletebgc" th:onclick="deletefun([[${list.id}+'']])">删除</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 分页 -->
                    <div class="text-center">
                        <div id="pagination3" class="page fl"></div>
                        <!-- 暂时放在这，后期去掉 -->
                        <div class="box">
                            <div id="pagination3" class="page fl"></div>
                            <div class="info fl">
                                <p>当前页数：<span id="current3" th:text="${page.getCurrent()}">4</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 引入公共js文件 -->
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/jquery.slimscroll.min.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/jquery.pagination.min.js}"></script>

    <script>
        /**
         *  此方法为切换左边菜单的js文件
         */
        $(".list_dt").on("click", function() {
            $('.list_dd').stop();
            $(this).siblings("dt").removeAttr("id");
            if ($(this).attr("id") == "open") {
                $(this).removeAttr("id").siblings("dd").slideUp();
            } else {
                $(this).attr("id", "open").next().slideDown().siblings("dd").slideUp();
            }
        });

        /**
         * 此方法为分页插件提供方法 
         * 分页功能
         * 参考文档  http://www.jq22.com/jquery-info15113
         */
        $(function() {
            $("#pagination3").pagination({
                currentPage: [[${page.current}]],
                totalPage: [[${page.total%5==0?page.total/5:page.total/5+1}]],
                isShow: true,
                count: 5,
                homePageText: "首页",
                endPageText: "尾页",
                prevPageText: "上一页",
                nextPageText: "下一页",
                callback: function(current) {
                    /**
                     * 回调函数，请求数据 
                     * current为页面数
                     */
                    $("#current3").text(current);
                    location.href="/movie/movie-actor/actorTables/"+current;
                }
            });

            $("#getPage").on("click", function() {
                var info = $("#pagination3").pagination("getPage");
                alert("当前页数：" + info.current + ",总页数：" + info.total);
            });

            $("#setPage").on("click", function() {
                $("#pagination3").pagination("setPage", 1, 10);
            });
        });



        function addfun() {
            window.location.href = "/actorAddOrEditor.html";
        }

        function deletefun(id) {
            alert(id)
            let b = confirm("确认删除吗");
            if (b==true) {
                window.location.href = "/movie/movie-actor/delete/"+id;
            }

        }

        function editfun(id) {
            window.location.href = "/movie/movie-actor/edit/"+id;
        }
    </script>
</body>

</html>